<template>
  <div class="u-relative d-flex u-flex-col u-flex-1 u-p-30 w-full">
    <!-- 搜索栏 -->

    <Searchtitle>
      <el-button
        class="u-m-l-10"
        type="primary"
        size="mini"
        plain
        v-throttle="() => doAction('addkh')"
        >新增</el-button
      >

      <!-- <el-popover placement="left" class="u-m-l-10" trigger="click" width="50">
        <el-button slot="reference" type="primary" plain size="mini"
          >功能操作</el-button
        >
        <div class="cpopover">
          <div class="gobng"><i class="el-icon-download gobngi"></i>导出</div>
        </div>
      </el-popover> -->
    </Searchtitle>
    <!-- NOTE: 用于设置表格最大高度 -->
    <div class="u-flex-1" ref="table">
      <y-table
        ref="tableInner"
        :row-key="getRowKey"
        :data="tableData"
        :columns="tableColumn"
        :defaultColumnConfig="defaultColumnConfig"
        @selection-change="handleSelectionChange"
        :height="tableHeight"
        @row-click="handleRowClick"
      >
      </y-table>
    </div>

    <!-- 分页 -->
    <div
      class="table-footer pl-15 pr-15 text-left"
      style="
        box-shadow: none;
        background: none;
        box-sizing: border-box;
        padding-top: 20px;
      "
    >
      <div class="pagination-nav">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="pagination.current"
          :page-sizes="paginationSizes"
          :page-size="pagination.size"
          layout="total, prev, pager, next, sizes"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import { loadClearList } from "./api/service";

import { deepClone } from "@/utils/index";

import { debounce } from "throttle-debounce";

// ======= 组件列表 ========
import Searchtitle from "./compontents/searchtitle.vue";
import addfeiyonleibie_from from "./compontents/addfeiyonleibie_from.vue";

import TableRowClickMixin from "@/mixins/table/RowClickMixin";

// 查询
let TableMixin = {
  data() {
    return {
      tableHeight: 0,
      defaultColumnConfig: {
        align: "center",
        width: 100,
      },

      tableColumn: [
        // {
        //   type: "selection",
        //   width: 55,
        // },
        // {
        //   type: "index",
        //   label: "序号",
        //   width: 55,
        // },
        {
          prop: "picihao",
          label: "费用类别",
          showOverflowTooltip: true,
          width: 150,
          render: (h, scope) => {
            let val = scope.row.picihao;
            return <span>{val}</span>;
          },
        },
        {
          prop: "kehumingcheng",
          label: "支付方式",
          showOverflowTooltip: true,

          render: (h, scope) => {
            let val = scope.row.kehumingcheng;
            return <span>{val}</span>;
          },
        },

        {
          prop: "CompanyCode",
          label: "税率",
          showOverflowTooltip: true,
        },
        {
          prop: "kehulexing",
          label: "单位",
          render: (h, scope) => {
            let val = scope.row.kehulexing;
            return <span>{val}</span>;
          },
        },

        {
          prop: "jiezhiriqi",
          label: "标准单价(元)",
          render: (h, scope) => {
            // let val = this.$formatDate(scope.row.jiezhiriqi);
            let val = scope.row.jiezhiriqi;
            return <span>{val}</span>;
          },
        },
        {
          prop: "shisid",
          label: "分摊类型",
          render: (h, scope) => {
            let val = scope.row.shisid;
            return <span>{val}</span>;
          },
        },
        {
          prop: "quxian",
          label: "排序",
          render: (h, scope) => {
            let val = scope.row.quxian;
            return <span>{val}</span>;
          },
        },
        {
          prop: "quueie",
          label: "费用归属",
          render: (h, scope) => {
            let val = scope.row.quueie;
            return <span>{val}</span>;
          },
        },
        {
          prop: "jindud",
          label: "审批分类",
          render: (h, scope) => {
            let val = scope.row.jindud;
            return <span>{val}</span>;
          },
        },
        {
          prop: "weieif",
          label: "是否显示",
          render: (h, scope) => {
            let val = scope.row.weieif;
            if (val === "1") {
              return (
                <div style="display:flex;justify-content:center">
                  <div style="width:13px;height:13px;border-radius:50%;background:#24da00;"></div>
                </div>
              );
            } else {
              return <div></div>;
            }
          },
        },
        {
          prop: "fieoa",
          label: "APP显示",
          render: (h, scope) => {
            let val = scope.row.fieoa;
            if (val === "1") {
              return (
                <div style="display:flex;justify-content:center">
                  <div style="width:13px;height:13px;border-radius:50%;background:#24da00;"></div>
                </div>
              );
            } else {
              return <div></div>;
            }
          },
        },

        {
          prop: "sifouchanyong",
          label: "是否常用",
          render: (h, scope) => {
            let val = scope.row.sifouchanyong;
            return <span>{val}</span>;
          },
        },
        {
          prop: "xitonxuanxiang",
          label: "系统选项",
          render: (h, scope) => {
            let val = scope.row.xitonxuanxiang;
            return <span>{val}</span>;
          },
        },
        {
          prop: "jjsmbz",
          label: "计价说明备注",
          render: (h, scope) => {
            let val = scope.row.jjsmbz;
            return <span>{val}</span>;
          },
        },
        {
          prop: "feihyon",
          label: "费用",
          render: (h, scope) => {
            let val = scope.row.feihyon;
            return <span>{val}</span>;
          },
        },
        {
          prop: "xiugairen",
          label: "修改人",
          render: (h, scope) => {
            let val = scope.row.xiugairen;
            return <span>{val}</span>;
          },
        },
        {
          prop: "xiugaishijian",
          label: "修改时间",
          render: (h, scope) => {
            let val = scope.row.xiugaishijian;
            return <span>{val}</span>;
          },
        },
        {
          label: "操作",
          fixed: "right",
          width: "120",
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  onClick={() => this.doAction("edit", scope.row)}
                >
                  编辑
                </el-button>
              </div>
            );
          },
        },
      ],

      isTableLoading: true,
      tableData: [
        {
          id: 1,
          picihao: "ETC过路费",
          kehumingcheng: "现金",
          CompanyCode: "3%",
          kehulexing: "元",
          jiezhiriqi: "99",
          shisid: "1",
          quxian: "1",
          quueie: "人工成本",
          jindud: "维修类",
          weieif: "1",
          fieoa: "1",
          sifouchanyong: "是",
          xitonxuanxiang: "无",
          jjsmbz: "无",
          feihyon: "100",
          xiugairen: "管理员",
          xiugaishijian: "2024-02-12",
        },
        {
          id: 2,
          picihao: "集装箱费",
          kehumingcheng: "现金",
          CompanyCode: "3%",
          kehulexing: "元",
          jiezhiriqi: "99",
          shisid: "2",
          quxian: "1",
          quueie: "人工成本",
          jindud: "维修类",
          weieif: "1",
          fieoa: "2",
          sifouchanyong: "是",
          xitonxuanxiang: "无",
          jjsmbz: "无",
          feihyon: "100",
          xiugairen: "管理员",
          xiugaishijian: "2024-02-12",
        },
        {
          id: 3,
          picihao: "集装箱费",
          kehumingcheng: "现金",
          CompanyCode: "3%",
          kehulexing: "元",
          jiezhiriqi: "99",
          shisid: "2",
          quxian: "1",
          quueie: "人工成本",
          jindud: "维修类",
          weieif: "1",
          fieoa: "1",
          sifouchanyong: "是",
          xitonxuanxiang: "无",
          jjsmbz: "无",
          feihyon: "100",
          xiugairen: "管理员",
          xiugaishijian: "2024-02-12",
        },
      ],
      // 选择的项
      multipleSelection: [],
    };
  },

  methods: {
    getRowKey(row) {
      return row.id;
    },

    //查询操作（条件总数据）-安全检查
    handleSubmit(order) {
      let q = deepClone(this.queryParams);
      console.log(q);
      let whereStr = [];
      let orderstr = "a.CreateDate desc"; // ziduan asc
      if (order !== "" && order !== undefined) {
        orderstr = order;
      }
      if (q.CompanyCode != "") {
        whereStr.push(this.$sql.select("CompanyCode", q.CompanyCode));
      }
      if (q.clientname != "") {
        whereStr.push(this.$sql.input("kehumingcheng", q.clientname));
      }

      let isValidateDateRange = (arr) => {
        let isArray = Array.isArray(arr);
        if (isArray && arr.length !== 0) return true;
        return false;
      };
      if (isValidateDateRange(q.riqi)) {
        whereStr.push(
          this.$sql.range("jiezhiriqi", [q.riqi[0], null]),
          this.$sql.range("jiezhiriqi", [null, q.riqi[1]])
        );
      }
      let where = this.$sql.toSQL(whereStr);

      let params = {
        tableName: "31f79c17-de35-4289-b878-7a1c98456e5d",
        pageNum: 1,
        pageSize: 15,
      };
      // 获取查询请求
      this.loadList(params);
    },
  },
};

// 获取请求
let PaginationMixin = {
  data() {
    return {
      // 分页
      pagination: {
        current: 1,
        size: 15,
      },

      // 数据总条数
      total: 0,
      paginationSizes: [15, 30, 50],
    };
  },

  methods: {
    /**
     * 设置数据总页数
     * @param {Number} num
     */
    setTotal(num) {
      this.total = num;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    loadList(apiOptions) {
      this.isTableLoading = true;
      loadClearList(apiOptions)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.data || [];
            console.log("列表数据", this.tableData);
            this.setTotal(res.data.count);
            this.isTableLoading = false;
          } else {
            this.tableData = [];
            this.isTableLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("请求异常，请重试");
          this.isTableLoading = false;
        });
    },
  },
};

let CommonMixin = {
  mixins: [TableMixin, PaginationMixin],

  data() {
    return {
      // 查询条件
      queryParams: {
        riqi: [],
        clientname: "",
        CompanyCode: "",
      },

      queryOptions: {
        clientnameOptions: [],
        suoshuzuzhiOptiopns: [],
      },
    };
  },

  methods: {
    quedifun(e) {
      console.log("打印结果===>", e);
    },
    // 绑定后台是否升降序
    sortchange(column) {
      console.log(column);
      var fieldName = column.prop;
      var sortingType = column.order;

      if (sortingType === "descending") {
        sortingType = "desc";
      } //按照升序排序
      else {
        sortingType = "asc";
      }
      let co = fieldName + " " + sortingType;
      console.log(co);
      this.handleSubmit(co);
    },

    /**
     * 处理分页器页面数据大小变化
     */
    handleSizeChange(size) {
      let pagination = this.getPaginationState();
      pagination.current = 1;
      pagination.size = size;
      this.refresh();
    },

    /**
     * 处理分页器页面数变化
     */
    handleCurrentChange(current) {
      let pagination = this.getPaginationState();
      pagination.current = current;
      this.refresh();
    },

    /**
     * 列表接口适配器
     */
    getPaginationState() {
      return this.pagination;
    },
  },
};

export default {
  name: "manyidudiaocha",

  mixins: [CommonMixin, TableRowClickMixin],

  components: { Searchtitle },

  data() {
    return {};
  },

  methods: {
    /**
     * 计算表格可用高度
     */
    calcTableAviableHeight() {
      let el = this.$refs.table;
      if (el && el.getBoundingClientRect) {
        let { top } = el.getBoundingClientRect();
        let h = 50 + 15 + 27 + top;
        let tableHeight = window.innerHeight - h - 33; // 设置table的高度
        el.style.height = tableHeight + "px";
        this.tableHeight = tableHeight;
      }
    },
    doAction(actionType, data) {
      console.log(`ActionType : ${actionType}`);

      /**
       * Action处理策略
       */
      const actionStrategies = {
        /**
         * 新增客户信息
         */
        addkh: () => {
          const data = {
            mode: "addfeiyonleibie_from",
          };
          this.openDialog(data);
        },
        /**
         * 修改客户信息
         */
        edit: () => {
          const data = {
            mode: "editfeiyonleibie_from",
          };
          this.openDialog(data);
        },

        // 查询
        search: () => {
          this.handleSubmit();
        },
      };

      const actionStrategy = actionStrategies[actionType];
      if (!actionStrategy) return;
      actionStrategy(data);
    },

    // 打开弹窗
    openDialog(data) {
      let strategies = {
        addfeiyonleibie_from,
        editfeiyonleibie_from: addfeiyonleibie_from,
      };
      this.$openDialog(strategies[data.mode])(data, this)
        .then(() => {
          // 刷新页面
          this.refresh();
        })
        .catch(() => {
          console.log("用户返回了");
        });
    },

    refresh() {
      this.handleSubmit();
    },

    getAllOptions() {
      let listOptions = [
        {
          dicTypeID: "kehuxinxi",
          dicTypeName: "客户名称",
          key: "clientnameOptions",
        },
        {
          dicTypeID: "-1",
          key: "suoshuzuzhiOptiopns",
        },
      ];
      this.$getOptions.call(this, listOptions, "queryOptions");
    },
  },

  created() {
    console.log("打印结果", this.$store.state);
    // this.handleSubmit();
    // 获取下拉选项
    this.getAllOptions();
    this.debounceHandleResize = debounce(
      250,
      this.calcTableAviableHeight.bind(this)
    );
  },
  mounted() {
    let $__func = this.debounceHandleResize.bind(this);
    window.addEventListener("resize", $__func);

    this.$nextTick(() => {
      this.calcTableAviableHeight();
    });
  },
};
</script>

<style lang="scss" scoped>
// 查询条件日期-至
::v-deep.dataPicker {
  width: 320px;
  & .el-range-separator {
    padding: 0;
  }
}
.box {
  margin: 20px;
  height: 500px;

  div {
    background: rgba(226, 232, 239, 1);
    height: 100%;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;

    p {
      display: flex;
      justify-content: space-evenly;
    }
  }

  h1 {
    font-size: 18px;
    color: rgba(0, 0, 0, 1);
    font-weight: 900;
    text-align: center;
    padding: 10px;

    i {
      color: rgba(4, 130, 176, 1);
      font-style: normal;
    }
  }

  span {
    width: 60%;
    height: 35px;
    border-radius: 5px;
    color: rgba(56, 56, 56, 1);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(176, 177, 177, 1);
    text-align: center;
    line-height: 35px;
    cursor: pointer;
  }

  .rig {
    width: 23%;
    height: 35px;
  }
}

.btn-stop-use {
  color: #444444;
  background: rgba(192, 192, 192, 1);
  border: 1px solid rgba(176, 177, 177, 1);
}
.gobng {
  width: 100%;
  cursor: pointer;
  margin: 3px 0;
  &:hover {
    color: rgb(123, 187, 240);
  }
}
.gobngi {
  margin-right: 3px;
}
.isastart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #55f50b;
}
</style>
